Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會延續 Re: 從零改用 .NET MAUI 技術來繼續過去用 Xamarin 技術開發的一個 App : TopStore 使用 .NET MAUI 技術所建立的 TopStore App ，更新 .NET MAUI 在 .NET 6 轉換到 .NET 7 時所需要調整的部分，並持續地的開發 TopStore App 其他需要的功能。

本篇是 Re: 從零續用 .NET MAUI 技術開發過去的一個 App : TopStore 系列 系列文的 EP27。

由於先前在撰寫 "訂單列表" 的相關瀏覽時，只注重可以快速看到訂單的資訊，在先前的相關 EP 介紹時，很快速的把這個功能完成了。

但既然現在可以開始增加訂單的資料時，相對的也要能進行編輯與刪除等功能了~~~

首先，就先來處理編輯一筆訂單當中的某項商品販售價格、販售數量、備註的資訊，也就是要編輯其中的一筆 OrderDetail 的紀錄內容！

要處理 OrderDetail 的資料紀錄，當然就要調整 MockData、DataService 與 IDataService 的設計。

首先，在 IDataService 增加一個 GetOrderDetail 方法、一個 SaveOrderDetail 方法的宣告，並透過實作介面的處理幫 MockData 與 DataService 都實作好 GetOrderDetail、SaveOrderDetail 方法。

在 IDataService：

Models.OrderDetail GetOrderDetail(int orderDetailId);
int SaveOrderDetail(Models.OrderDetail orderDetail);

完成結果如下圖：

在 DataService:

public OrderDetail GetOrderDetail(int orderDetailId)
{
    throw new NotImplementedException();
}

public int SaveOrderDetail(OrderDetail orderDetail)
{
    throw new NotImplementedException();
}

完成結果如下圖：

在 MockData:

public OrderDetail GetOrderDetail(int orderDetailId)
{
    return orderDetails.FirstOrDefault((orderDetail) => orderDetail.Id == orderDetailId);
}

public int SaveOrderDetail(OrderDetail orderDetail)
{
    return 1;
}

由於 MockData 在 GetOrderDetail 回傳的是 OrderDetail 的物件，所以從 View 編輯時就會直接變更 orderDetails 所記錄的物件資料，其實有沒有 SaveOrderDetail 並沒有顯著的差異，但若之後在使用 DataService 的時候仍是要仰賴呼叫 SaveOrderDetail 處理 SQLite DB 的內容，所以仍是在 MockData 中把 SaveOrderDetail 實作出來。

完成結果如下圖：

繼續要調整的是 OrderDetailShowPage 與 OrderDetailShowPageViewModel。

首先，針對 OrderDetailShowPageViewModel 增加一個 ObservableProperty 的 _isEdit 屬性，以便 OrderDetailShowPage 可以判定是否處於編輯模式。

[ObservableProperty]
private bool _isEdit;

接著，再針對 OrderDetailShowPageViewModel 增加一個 RelayCommand 的 Save 方法，以便 OrderDetailShowPage 可以切換是否進入編輯。

[RelayCommand]
private async void Save()
{
    if (IsEdit)
    {
        var orderDetail = App.DataService.GetOrderDetail(OrderDetailShow.OrderDetailId);
        if (orderDetail != null)
        {
            orderDetail.Quantity = OrderDetailShow.Quantity;
            orderDetail.Price = OrderDetailShow.Price;
            orderDetail.Note = OrderDetailShow.Note;
            App.DataService.SaveOrderDetail(orderDetail);
        }

        var isBack = await Shell.Current.DisplayAlert("通知", "儲存成功!",
                                                            "返回訂單明細列表", "再檢視此筆資料");
        if (isBack)
        {
            await Shell.Current.GoToAsync("..");
        }
    }
    IsEdit = !IsEdit;
}

完成結果如下圖：

OrderDetailShowPage 這邊也要調整一些 XAML 的編輯，增加一個 ToolbarItem 做切換 IsEdit 模式；Entry 的 IsEnabled 繫結到 IsEdit 屬性。

<ContentPage.ToolbarItems>
    <ToolbarItem Command="{Binding SaveCommand}" 
                    Text="{Binding IsEdit, Converter={StaticResource DetailPageToolBarItemDisplayText}, ConverterParameter='儲存,編輯'}" />
</ContentPage.ToolbarItems>

IsEnabled="False" => IsEnabled="{Binding IsEdit}"

完成結果如下圖：

以上變更完成後，執行的結果如下圖展示：